<!-- 首页 手机号登录 -->
<template>
    <view class="login-box">
        <view class="top-one-click-login-box">
            <view @click="loginJumpFn(item)" v-for="item in state.loginList" :key="item.id">{{ item.name }}</view>
        </view>
        <view class="top-slogn-box">
            <view class="top-slogn">
                你好，
            </view>
            <text>欢迎来到媛世界</text>
        </view>
        <view class="mobile-number">
            <text>+86</text><van-field v-model="state.mobileNumber" placeholder="请输入手机号" />
        </view>
        <van-button type="primary" class="mobile-login-btn" :loading="state.isLoading" @click="loginFn()">验证并登录</van-button>
        <agreement :agreementList="state.agreementList" @update:isAgree="(ev) => state.isAgree = ev" />
    </view>
</template>

<script setup>
import {
    checkCode,// 获取验证码
} from "@/api/login"

import agreement from "@/components/agreement/index.vue"
import { reactive, getCurrentInstance, onMounted } from "vue"
import { getAuthorization, setAuthorization } from "@/utils/auth.js"

// let socketTask = uni.connectSocket({
//    url:'http://47.107.225.95:4002/Health/Check',
// })

let { proxy } = getCurrentInstance()

const state = reactive({
    loginList: [
        // {
        //     id: 1,
        //     name: "一键登录",
        //     url: "/pages/login/mobileNumberLogin/index"
        // },
        {
            id: 1,
            name: "",
            url: ""
        },
        {
            id: 2,
            name: "密码登录",
            url: "/pages/login/passwordLogin/index"
        }
    ],
    agreementList: [
        {
            id: 1,
            name: "《媛世界用户协议》",
            url: "https://www.ysjcp.com/UserUseAgreement.html"
        },
        {
            id: 2,
            name: "《媛世界隐私条款》",
            url: "https://www.ysjcp.com/PrivacyAgreement.html"
        }
    ],
    mobileNumber: "",
    isAgree: false,
    isLoading:false
})

const loginJumpFn = (item) => {
    let { url } = item
    uni.navigateTo({
        url
    })
}

onMounted(async () => {
})

let phone = getAuthorization("phoneNumber")
if (!phone) {
    state.loginList[0].name = ""
}

const loginFn = async () => {
    if (!state.isAgree || !state.mobileNumber) {
        let msg = !state.mobileNumber ? '请输入手机号' : !state.isAgree ? "请先同意协议" : ''
        uni.showToast({
            title:msg,
            icon: "none",
            duration: 2000
        });
        return
    }
    localStorage.setItem("userInfo",'{}')
    try {
        state.isLoading = true
        let data = await proxy.$get(checkCode + state.mobileNumber + '?codeType=0')
        setAuthorization("phoneNumber", state.mobileNumber)
        setAuthorization("codeKey", data.data)
        if (data.code == 200) {
            uni.navigateTo({
                url: '/pages/login/verificationCode/index?type=1'
            })
        }
    } catch (err) {
        state.isLoading = false
        uni.showToast({
            title:err.message,
            icon: "none",
        });
    }
}

</script>

<style lang="scss" scoped>
.login-box {
    position: fixed;
    width: 100%;
    height: 100%;
}

.top-one-click-login-box {
    padding-top: 30rpx;
    display: flex;
    justify-content: space-between;
    font-size: 32rpx;
    color: #262626;
    margin: 0 60rpx;
    font-weight: 600;
    margin-bottom: 120rpx;
}

.mobile-number {
    margin: 220rpx 60rpx 50rpx 60rpx;
    display: flex;
    align-items: center;
    padding-bottom: 30rpx;
    border-bottom: 1px solid #C6C6C6;

    text {
        border-right: 1px solid #C6C6C6;
        padding-right: 36rpx;
        margin-right: 36rpx;
    }

    .van-field {
        padding: 0;
        font-size: 36rpx;

        :deep(.van-field__control) {
            font-size: 36rpx;
        }
    }
}

.top-slogn-box {
    padding: 0 60rpx;
    font-size: 48rpx;
    text-align: left;
}

.top-logo-box {
    .logo-text {
        text-align: center;
        font-size: 40rpx;
        color: #5C5C5C;
    }

    .top-logo {
        display: flex;
        justify-content: center;
        padding-top: 314rpx;

        img {
            width: 312rpx;
            height: 104rpx;
        }
    }
}

.mobile-login-btn {
    font-size: 40rpx;
    margin-bottom: 10rpx;
    width: calc(100vw - 120rpx);
}
</style>
